<template>
  <div class="flex items-center space-x-4">
    <div class="flex items-center" v-if="showPageSizeSelector">
      <span class="text-sm text-gray-500 mr-2">每页显示：</span>
      <select
        :value="pageSize"
        @change="handlePageSizeChange"
        class="px-2 py-1 bg-gray-100 border border-gray-300 rounded text-sm focus:outline-none"
      >
        <option v-for="size in pageSizes" :key="size" :value="size">
          {{ size }} 条
        </option>
      </select>
    </div>
    <div class="flex space-x-2 items-center">
      <span class="text-sm text-gray-500">共 {{ total }} 条记录</span>
      <button
        @click="changePage(currentPage - 1)"
        :disabled="currentPage === 1"
        class="px-3 py-1 bg-gray-100 text-gray-700 rounded text-sm !rounded-button whitespace-nowrap cursor-pointer"
        :class="{ 'opacity-50 cursor-not-allowed': currentPage === 1 }"
      >
        上一页
      </button>

      <!-- 页码显示 -->
      <template v-for="page in visiblePages" :key="page">
        <button
          v-if="page !== '...'"
          @click="changePage(page)"
          class="px-3 py-1 rounded text-sm !rounded-button whitespace-nowrap cursor-pointer"
          :class="page === currentPage ? 'bg-blue-600 text-white' : 'bg-gray-100 text-gray-700'"
        >
          {{ page }}
        </button>
        <span v-else class="px-1 py-1 text-gray-500">
          ...
        </span>
      </template>

      <button
        @click="changePage(currentPage + 1)"
        :disabled="currentPage === totalPages"
        class="px-3 py-1 bg-gray-100 text-gray-700 rounded text-sm !rounded-button whitespace-nowrap cursor-pointer"
        :class="{ 'opacity-50 cursor-not-allowed': currentPage === totalPages }"
      >
        下一页
      </button>
    </div>
  </div>
</template>

<script>
export default {
  name: "Pagination",
  props: {
    currentPage: {
      type: Number,
      required: true,
      default: 1
    },
    pageSize: {
      type: Number,
      required: true,
      default: 10
    },
    total: {
      type: Number,
      required: true,
      default: 0
    },
    pageSizes: {
      type: Array,
      default: () => [5, 10, 20, 50]
    },
    showPageSizeSelector: {
      type: Boolean,
      default: true
    }
  },
  emits: ["page-change", "page-size-change"],
  computed: {
    totalPages() {
      return Math.ceil(this.total / this.pageSize) || 1;
    },
    visiblePages() {
      const pages = [];
      const totalPages = this.totalPages;
      const currentPage = this.currentPage;
      
      if (totalPages <= 7) {
        // 如果总页数小于等于7，显示所有页码
        for (let i = 1; i <= totalPages; i++) {
          pages.push(i);
        }
      } else {
        // 添加第一页
        pages.push(1);
        
        // 根据当前页位置确定中间显示的页码
        if (currentPage <= 4) {
          // 当前页在前4页内
          pages.push(2, 3, 4, 5, '...', totalPages);
        } else if (currentPage >= totalPages - 3) {
          // 当前页在后4页内
          pages.push('...', totalPages - 4, totalPages - 3, totalPages - 2, totalPages - 1, totalPages);
        } else {
          // 当前页在中间
          pages.push('...', currentPage - 1, currentPage, currentPage + 1, '...', totalPages);
        }
      }
      
      return pages;
    }
  },
  methods: {
    changePage(page) {
      if (page >= 1 && page <= this.totalPages && page !== this.currentPage) {
        this.$emit("page-change", page);
      }
    },
    handlePageSizeChange(event) {
      const size = parseInt(event.target.value);
      this.$emit("page-size-change", size);
    }
  },
  watch: {
    totalPages(newVal) {
      // 如果当前页超过了总页数，调整到最大页
      if (this.currentPage > newVal) {
        this.changePage(newVal);
      }
    }
  }
};
</script>

<style scoped>
/* 可以根据需要添加样式 */
</style>